<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合格评估知识问答系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: 70vh;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .user-message {
            background-color: #d1ecf1;
            border-radius: 10px;
            padding: 10px;
            margin: 10px 0;
            text-align: right;
        }
        .bot-message {
            background-color: #e2e3e5;
            border-radius: 10px;
            padding: 10px;
            margin: 10px 0;
        }
        .source-doc {
            font-size: 0.8em;
            color: #6c757d;
            border-left: 3px solid #6c757d;
            padding-left: 10px;
            margin-top: 10px;
        }
        .typing-indicator {
            display: none;
            color: #6c757d;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center">知识库问答系统</h1>
        <p class="text-center text-muted">基于LangChain和RAG技术的智能问答机器人</p>
        
        <div class="chat-container" id="chatContainer">
            <div class="bot-message">
                您好！我是基于您的合格评估知识问答助手，请问有什么可以帮助您的？
            </div>
        </div>
        
        <div class="typing-indicator mb-2" id="typingIndicator">
            正在思考...
        </div>
        
        <div class="input-group mb-3">
            <input type="text" class="form-control" id="questionInput" placeholder="请输入您的问题...">
            <button class="btn btn-primary" type="button" id="askButton">提问</button>
        </div>
        
        <div class="form-text">
            示例问题: "合格评估的主要程序包括哪些", "什么是合格评估指标体系"
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.getElementById('chatContainer');
            const questionInput = document.getElementById('questionInput');
            const askButton = document.getElementById('askButton');
            const typingIndicator = document.getElementById('typingIndicator');
            
            // 添加用户消息到聊天窗口
            function addUserMessage(message) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'user-message';
                messageDiv.innerHTML = `<strong>您:</strong><br>${message}`;
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            // 添加机器人消息到聊天窗口
            function addBotMessage(message, sources = []) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'bot-message';
                
                let html = `<strong>助手:</strong><br>${message}`;
                
                // 如果有来源文档，显示来源
                if (sources && sources.length > 0) {
                    html += `<div class="mt-2"><small>来源:</small>`;
                    sources.forEach((source, index) => {
                        html += `<div class="source-doc">
                            <div>文档${index + 1}: ${source.content}</div>
                            <div>来源: ${source.metadata.source}, 页码: ${source.metadata.page || '未知'}</div>
                        </div>`;
                    });
                    html += `</div>`;
                }
                
                messageDiv.innerHTML = html;
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            // 处理提问
            function askQuestion() {
                const question = questionInput.value.trim();
                if (!question) return;
                
                // 添加用户消息到聊天窗口
                addUserMessage(question);
                questionInput.value = '';
                
                // 显示正在输入指示器
                typingIndicator.style.display = 'block';
                
                // 发送请求到后端
                fetch('/ask', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ question: question })
                })
                .then(response => response.json())
                .then(data => {
                    // 隐藏正在输入指示器
                    typingIndicator.style.display = 'none';
                    
                    if (data.success) {
                        addBotMessage(data.answer, data.sources);
                    } else {
                        addBotMessage(`抱歉，出现问题: ${data.error}`);
                    }
                })
                .catch(error => {
                    // 隐藏正在输入指示器
                    typingIndicator.style.display = 'none';
                    addBotMessage('抱歉，网络请求失败，请稍后重试。');
                    console.error('Error:', error);
                });
            }
            
            // 绑定按钮点击事件
            askButton.addEventListener('click', askQuestion);
            
            // 绑定回车键事件
            questionInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    askQuestion();
                }
            });
        });
    </script>
</body>
</html>